<template>
    <div>
        <Navt title="查看详情" custom="true" @customRouter="customRouter"></Navt>
        <div class="v-details">
            <plan :plant="Spart.result"></plan>
            <spacing></spacing>
            <particul v-if="Spart.result" :partic="Spart.result"></particul>
            <spacing></spacing>
            <div class="partcont">
                <handling v-if="Spart" :handing="Spart.result.EVENTFLOW_LIST" @tij="tijiao"></handling>
            </div>
            <particulars v-if="state" @sta="chageSta" :eventId="Spart.result.EVENT_ID"></particulars>
        </div>
        <Row type="flex" justify="center" style="padding-top:50%;" v-if="Kload">
            <Col span="1">
                <Spin></Spin>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            state: false,
            Spart: '',
            Bstate: '',
            Kload: true // 组件加载状态

        }
    },
    methods: {
        customRouter() { // 判断是情况反应中未处理跳转过来的就放回到未处理的页面中
            if (this.$route.query.num === 0) {
                this.$store.commit('SET_Ochangestate', 0)
                this.$router.push({
                    path: '/pending',
                    query: {
                        Nnum: 1
                    }
                })
            } else if (this.$route.query.num === 1) { // 判断是情况反应中已处理跳转过来的就放回到已处理的页面中
                this.$store.commit('SET_Tchangestate', 1)
                this.$router.push({
                    path: '/pendingsuccess'
                })
            }
        },
        tijiao() { // 显示回复组件
            this.state = true
        },
        chageSta() { // 关闭回复组件
            const Vm = this
            this.state = false
            Vm.setHandoutList(this.Bstate)
        },
        /**
         * 设置情况反应（教职工）已处理
         * @staffState 处理状态
         */
        async setHandoutList(senvt) {
            this.Bstate = senvt
            const State = this.$store.state
            const events = this.$route.query.Sindex
            let HandoutList = await this.$store.dispatch('getHandoutL', {
                userId: State.userInfo.USER_ID,
                senvt: events
            })
            console.log(HandoutList)
            this.Spart = HandoutList
            this.Kload = false
        }
    },
    created() {
        const Vm = this
        this.scroll = this.$store.state.Administrator.waitScroll
        /**
         * 确认用户信息是否加载
         */
        function isUserInfo() {
            return new Promise((resolve, reject) => {
                let isu = setInterval(() => {
                    if (Vm.$store.state.userInfo) {
                        clearInterval(isu)
                        resolve()
                    }
                }, 100)
            })
        }
        // 执行步骤
        async function Step() {
            Vm.setHandoutList()
        }
        isUserInfo().then(() => {
            Step()
        })
    },
    destroyed() {
        console.log('切换')
        this.$store.commit('SET_waitScroll', this.scroll)
    },
    components: {
        Navt: () => import('../../components/common/Nav.vue'), // nav头部
        plan: () => import('../../components/staff/plan.vue'), // 进度条
        spacing: () => import('../../components/staff/spacing.vue'), // 间隔组件
        particul: () => import('../../components/staff/particul.vue'), // 查看详情问题情况插件
        handling: () => import('../../components/staff/handling.vue'), // 教职工查看详情处理组件
        particulars: () => import('../../components/staff/particulars.vue') // 回复组件
    },
}
</script>

<style lang="less">
.v-details{
    background-color:white;
    .partcont{
    padding-left:20px;
    background-color:white;
    }
    .cha-button{
        color:white;
        width:91%;
        height: 42px;
        margin:10px auto 20px;
        text-align:center;
        line-height:42px;
        border-radius:5px;
        font-size: 16px;
        background-color:#0093DD;
    }
}
</style>
